<template>
	<div class="login-panel">
		<h1 class="login-title">后台管理系统</h1>
		<div class="tabs">
			<!--      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch>-->
			<el-tabs v-model="activeName" class="demo-tabs" stretch>
				<el-tab-pane label="账号登录" name="account">
					<!--     邮箱标题与图标     -->
					<template #label>
						<div class="label">
							<el-icon>
								<UserFilled/>
							</el-icon>
							<span class="text">账号登录</span>
						</div>
					</template>
					<account-login></account-login>
				</el-tab-pane>
				<el-tab-pane label="邮箱登录" name="email">
					<!--     邮箱标题与图标     -->
					<template #label>
						<div class="label">
							<el-icon>
								<Message/>
							</el-icon>
							<span class="text">邮箱登录</span>
						</div>
					</template>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { Message, UserFilled } from '@element-plus/icons-vue'
import AccountLogin from '@/components/login/accountLogin.vue'

// 默认选中的选项卡。
const activeName = ref<String>('account')
</script>

<style scoped lang="less">
.login-panel {
	width: 330px;
	padding: 5vw;
	background-color: #021d30;
	color: #fff;
	opacity: 0.7;
	border-radius: 10px;
	
	.login-title {
		text-align: center;
		margin-bottom: 15px;
	}
	
	.label {
		display: flex;
		align-items: center;
		justify-content: center;
		
		.text {
			margin-left: 10px;
		}
	}
	
}

</style>

